使用 AngularJS 心得 Day 1 - 繫結資料超方便 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

DAY 1

AngularJS系列第 1 篇

使用 AngularJS 心得 Day 1 - 繫結資料超方便

javascript framework 鐵人賽 angularjs

葉宇霖

2013-09-23 13:40:55

7224 瀏覽

分享至

在第一次參加 AngularJS 的聚會，就被那將 JSON 資料綁定在 HTML 中，以及即時 input 、 output ，卻沒有寫幾行 code 嚇到了。之後幾天（不敢放話 30 天），就把我學習的過程記錄起來。但當然難免會有遺漏或是錯誤的部分，也懇請各位朋友能夠不吝指教 =D
首先當然是先到 AngularJS （以下簡稱 ng ）官網下載，看是要 Minified 、 UnCompressed 都有，官網也有提供 CDN 的使用。

依照先進的說法，Stable 跟 Unstable 其實都是可以正常運作的，但我忘了其中有什麼差異 :'(

載入 ng

好的，接著將 .js 檔引用至網頁當中

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>

設置 Module 、 Controller

首先，要先讓 ng 知道他所能管轄的範圍（主 Module ）為何，所以必須在 HTML 當中，設定 ng-app ；另外，如果要利用 ng 去改變 web 的一些狀態、資料，就要將邏輯寫至 Controller ，所以必須另外在 HTML 中設定 ng-controller 。

在 ng-app 所涵蓋的範圍中，會經過初始的編譯。

編譯過後，如果要再異動，就是看 ng-controller 所涵蓋的範圍。

<!doctype html>
<html lang="zh-tw" ng-app="myApp">


  <meta charset="UTF-8">
  <title>Day 01</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>



  <div>
    <p>{{data}} ng.</p>
  </div>
  <div ng-controller="myCtrl">
    <p>{{data}} ng.</p>
  </div>
  <script>
  angular.module('myApp', [])
    .controller('myCtrl', ['$scope',
      function($scope) {
        $scope.data = 'Hello';
      }
    ]);
  </script>

Day 01

由上述範例可知，第一個 p Tag 因為未被包含在 ng-controller 之中，所以並未顯示 hello ；而第二個 p Tag 因為被包在 ng-controller 中，所以 hello 就會被顯示出來。

解析

*****ng 在 HTML 中，若是搜索到有 {{}} 所組成的 code ，就會去做解析，他會去查 controller 中的 scope ，是否有該屬性可以應對。就如同我範例中的 HTML code {{data}} ，因為我在 controller 也設定了 $scope.data = 'Hello'; ，於是 ng 就會自動幫我將值綁定在 <p>{{data}} ng.</p> ，而變成 <p>Hello ng.</p>

*****在 JavaScript 中所寫的 angular.module('myApp', []) ，第一個參數所帶入的就是在 html Tag 中 ng-app 的值 myApp ，也就是此 web(application) 的名稱。第二個參數就是可用來注入其它 module ，這個容我之後再介紹 =D。

*****在 JavaScript 中所寫的 .controller('myCtrl', ['$scope', function($scope) {$scope.data = 'Hello';}]); ，controller 第一個參數是 html code 當中 ng-controller 的值，也就是此 web(application) 的主要邏輯 function 名稱。第二個參數放置你所想要使用的 service 及執行的 function 。

*****而 $scope 可以說是 ng 中最基本的 service ，它可是 html 與 controller 之間的橋樑，由本範例中可以看到，若是 html 中的變數與 controller 中的 $scope 屬性配對成功， ng 就會自動完成繫結。

說來慚愧，我寫 front-end 已經一年多， ng 是我第一次使用的 framework ，以前大多是使用 jQuery ，再加上我不是資訊本科系出身（先消毒 =D ），若是有說錯的觀念、或是錯誤的用法，也請各位高手鞭小力一點。